<template>
	<div class="concents">
		<div class="nav-bar">
			<span>个人信息</span>
		</div>
		<div class="body">
			<div class="picer" :data="types">
				<img :src="types.img" alt="">
				
			</div>

			<div class="input-list" :data="types">
				<div>
					<span>用户:</span>

					<span>{{ types.yonghuming
 }}</span>
				</div>

				<div>
					<span>收件人:</span>
					<span>{{ types.shoujianren

					}}</span>
				</div>

				<div>
					<span>性别:</span>
					<span>{{ types.xingbie }}</span>


				</div>
				<div>
					<span>生日:</span>
					<span>{{ types.shengri
					}}</span>
				</div>
				<div>
					<span>邮箱:</span>
					<span>{{ types.youxiang

					}}</span>
				</div>
			
				<div>
					<span>密码:</span>
					<span>{{ types.pwd

					}}</span>
				</div>
				<div>
					<span>收件号:</span>
					<span>{{ types.shouhuoshoujihao

					}}</span>
				</div>
				<div>
					<span>手机号:</span>
					<span>{{ types.shoujihao

					}}</span>
				</div>
				<div>
					<span>收件地址:</span>
					<span>{{ types.shouhuodizhi

					}}</span>
				</div>
			</div>
			<div style="margin-top: 50px;">
				<button @click="tuiChu" style="width: 250px;height: 40px;border-radius: 20px;background-color:#FEFCF8 ;">退出登录</button>
			</div>

		</div>
	</div>
</template>

<script>
import httpApi from "@/myaxios/index"
export default {
	data() {
		return {
			types: [

			]
		}

	},

	methods: {
		//组件挂载完毕后执行
		genRen() {
			let id = this.$route.params.id
			httpApi.GerenZhongxin.genRenxinxi({id}).then(res => {
				console.log('加载所有电影类别', res)
				//渲染option列表
				this.types = res.data[0]

			})
		},
		tuiChu(){
			this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

			localStorage.clear()
			this.$router.replace('/home/index')
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });          
        });






			
		}
		
	},

	//钩子函数:组件挂载完毕后执行
	mounted() {

		//初始化
		this.genRen()
	}


}
</script>

<style lang="scss" scoped>
.nav-bar {
	width: 100%;
	height: 30px;
	background-color: #D3D3D3;
	display: flex;

	>span {
		line-height: 30px;
		margin-left: 20px;
	}
}


.concents {
	position: relative;

	.body {
		position: absolute;
		left: 250px;
		top: 40px;
		width: 300px;
		height: 300px;

		.picer {
			>img {
				object-fit: cover;
				width: 80px;
				height: 80px;
				border-radius: 100%;
			}

			>p {
				margin-top: 1px;
				font-size: 15px;
				font-weight: 400;

			}
		}

		.input-list {
			>div {
				text-align: left;
				margin-top: 20px;
				margin-left: 30px;
				font-size: 20px;

				>text {
					margin-left: 20px;
				}
			}

			.biosday {
				width: 165px;
			}
		}

	}
}
</style>
